<template>
	<view class="content">
		<view class="content-head"></view>
		<view class="conter">
			<view class="conter-title title1">{{$t("index.title3")}}</view>
			<view class="conter-title title2">{{$t("index.title2")}}</view>
			<view class="item-box-today">
				<view class="item-today" @click="handleSell">Scan</view>
				<view class="item-today" @click="handleToday">Today</view>
			</view>
			<!-- <view class="item-box">
				<view class="item">Order</view>
			</view> -->
			<!--  v-if="table.length > 0" -->
			<view class="">
				<view class="item-box">
					<view class="intobtn" type="warn" @click="click">Confirm warehousing</view>
				</view>
				<!-- 未确认列表 -->
				<view class="table-wrap">
					<zb-table :show-header="true" :columns="column" :fit="false" :border="true" @find="buttonFind":data="table"></zb-table>
				</view>
			</view>
		</view>
		<uni-popup ref="tablebox" type="center">
			<view class="popupotable">
				<zb-table :show-header="true" :columns="pcolumn" :fit="true" :border="true" :data="ptable"></zb-table>
			</view>
		</uni-popup>
		<uni-popup ref="today" type="center">
			<view class="popupotable-ohter popupotable">
				<view style="padding-left: 16rpx; line-height: 96rpx;">today</view>
				<view>
					<zb-table :show-header="true" :columns="todaycolumn" :fit="false" :border="true"
						:data="todaytable"></zb-table>
				</view>
				<zb-table :show-header="false" :columns="totalcolumn" :fit="false" :border="true"
					:data="totaltable"></zb-table>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import utils from '../../../utils';
	export default {
		data() {
			return {
				outlist: [{
					text: "SELL no order",
					value: 5
				}],
				list: [],
				table: [],
				column: [
					{
						name: 'sku_nuber',
						label: 'Item ID',
						align: 'center',
						width: 80
					},
					{
						name: 'skc_number',
						label: 'SKU',
						align: 'center',
						width: 42
					},
					{
						name: 'ctn',
						label: 'CTN',
						align: 'center',
						width: 42
					},
					{
						name: 'total_amount',
						label: 'Value',
						align: 'center',
						width: 60
					},
					{
						type: 'selection',
						width: 42
					},
					{
						name: 'detailed',
						type: 'operation',
						label: 'detailed',
						align: 'center',
						renders: [
							{
								name: 'find',
								type: "default",
								func: 'find' // func 代表子元素点击的事件 父元素接收的事件 父元素 @find
							}
					  ]
					},
				],
				ptable: [],
				pcolumn: [
					{
						name: 'customer_name',
						label: 'Customer',
						align: 'center',
					},
					{
						name: 'sku_nuber',
						label: 'SKU',
						align: 'center',
					},
					// {
					// 	name: 'skc_number',
					// 	label: 'Item ID',
					// 	align: 'center',
					// },
					{
						name: 'goods_code',
						label: 'PC ID',
						align: 'center',
					}
				],
				todaytable: [],
				todaycolumn: [{
						name: 'sku_nuber',
						label: 'SKU',
						align: 'center',
						width: 120
					},
					{
						name: 'skc_number',
						label: 'Item ID',
						align: 'center',
						width: 100
					},
					// {
					// 	name: 'ctn',
					// 	label: 'Ctn',
					// 	align: 'center',
					// 	width: 40
					// },
					{
						name: 'total_amount',
						label: 'Value',
						align: 'center',
						width: 120
					},
				],
				totalcolumn: [{
						name: 'text',
						label: 'text',
						align: 'center',
						width: 120
					},
					{
						name: 'textvat',
						label: 'textvat',
						align: 'center',
						width: 100
					},
					{
						name: 'number',
						label: 'number',
						align: 'center',
						width: 40
					},
					{
						name: 'price',
						label: 'price',
						align: 'center',
						width: 120
					}
				],
				totaltable: [{
					text: "Total:",
					textvat: "VAT18%",
					number: 0,
					price: 0
				}],
			}
		},
		onShow() {
			this.getMarkOrder()
			this.handleList()
		},
		methods: {
			handleCK(item){//结束订单
				let url = this.$http + '/order/finishDeliveryGoods?id=' + item.id
				this.$ajax(url, "GET", null, (response) => {
					let res = JSON.parse(response)
					if (res.code == 200) {
						this.getMarkOrder()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			setPrice(price) {
				return utils.setPrice(price)
			},
			handleOrder(){
				uni.navigateTo({url: "/pages/sell/order"})
			},
			handleSell(){
				if(this.outlist.length>0){
					uni.navigateTo({url: "/pages/sell/shop/index?text=" + this.outlist[0].text + "&value=" + 5})
				}else{
					uni.showToast({
						title: "Select a pending shipment order",
						icon: "none"
					})
				}
			},
			handleTransport(){
				uni.navigateTo({url: "/pages/sell/transportOrder"})
			},
			click() {
				let stand = uni.getStorageSync("standing")
				this.table.map(item => {
					if (item.checked) {
						if (stand == 2) {
							this.storeReceiveConfim(item.goods_sku_id)
						} else if (stand == 3) {
							this.shopReceiveConfim(item.goods_sku_id)
						}
					}
				})
			},
			// 店铺入库扫码确认
			shopReceiveConfim(type, id) {
				let shopCellCheckedData=uni.getStorageSync('shopCellCheckedData')
				if(shopCellCheckedData.goods_sku_id){
					let userInfo = uni.getStorageSync('userInfo')
					let url = this.$http + '/shop/DeliveryConfim?remove_type=1&goods_sku_id=' + shopCellCheckedData.goods_sku_id + '&shop_id=' +
						userInfo.id
					this.$ajax(url, "GET", null, (response) => {
						let res = JSON.parse(response)
						if (res.code == 200) {
							this.handleList()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'Please select an order'
					})
				}
			},
			storeReceiveConfim(id) {
				let userInfo = uni.getStorageSync('userInfo')
				let url=`${this.$http}/store/DeliveryConfim?remove_type=1&goods_sku_id=${id}&store_id=${userInfo.id}`
				this.$ajax(url, "GET", null, (response) => {
					let res = JSON.parse(response)
					if (res.code == 200) {
						this.handleList()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getMarkOrder(){
				this.$ajax(this.$http + '/order/pendingShipment?outbound_status=1', "GET", null,
					(response) => {
						let res = JSON.parse(response)
						if (res.code == 200) {
							this.list = res.data
						} else {
							uni.showToast({
								title: res.msg||'系统异常',
								icon: 'none'
							})
						}
					})
			},
			// 获取未确认的列表
			handleList() {
				let stand = uni.getStorageSync("standing")
				this.$ajax(this.$http + '/shop/getDeliverySalesGoodsSkuLog?remove_type=1', "GET", null,
					(response) => {
						let res = JSON.parse(response)
						if (res.code == 200) {
							this.table = res.data
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
			},
			// 查看事件
			buttonFind(row, index) {
				this.findDetail(row.goods_sku_id, row.type)
				this.$refs.tablebox.open("center")
			},
			// 获取 查看的详情
			findDetail(id, type) {
				let stand = uni.getStorageSync("standing")
				if (stand == 2) {
					this.$ajax(this.$http + '/store/getDeliverySalesGoodsSkuDetails?remove_type=' + type +
						'&goods_sku_id=' + id,
						"GET",
						null,
						(response) => {
							let res = JSON.parse(response)
							if (res.code == 200) {
								// this.handleStoreList()
								this.ptable = res.data.map(item => {
									return {
										...item,
										time: this.$time5(item.ctime)
									}
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
				} else if (stand == 3) {
					this.$ajax(this.$http + '/shop/getDeliveryGoodsSkuDetails?remove_type=1&goods_sku_id=' + id, "GET",
						null,
						(response) => {
							let res = JSON.parse(response)
							if (res.code == 200) {
								// this.handleStoreList()
								this.ptable = res.data.map(item => {
									return {
										...item,
										time: this.$time5(item.ctime)
									}
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
				}
			},
			// today点击事件
			handleToday() {
				this.findToday()
			},
			// 获取today列表数据
			findToday() {
				this.totaltable[0].number = 0
				this.totaltable[0].price = 0
				this.$ajax(this.$http + '/shop/today', "GET",
					null,
					(response) => {
						let res = JSON.parse(response)
						if (res.code == 200) {
							// res.data
							this.todaytable = res.data

							this.todaytable.map(item => {
								this.totaltable[0].number += item.ctn
								this.totaltable[0].price += Number(item.total_amount)
							})
							this.totaltable[0].price = Number(this.totaltable[0].price).toFixed(2)
							this.$refs.today.open("center")
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
			},
			handleItem(item) {
				if (item.value == 5) {
					uni.navigateTo({
						url: "/pages/sell/index?text=" + item.text + "&value=" + item.value
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background: linear-gradient(to right, rgba(#FF725F80, 0.5), rgba(#FFEBEB80, 0.5));
	}

	.content-head {
		height: 88rpx;
	}

	.conter {
		border-radius: 20rpx 20rpx 0 0;
		height: 100%;
		background: #fff;
		padding: 60rpx 48rpx;
	}

	.conter-title {
		font-size: 36rpx;
		font-weight: 900;
	}

	.title2 {
		margin-top: 22rpx;
		margin-bottom: 92rpx;
	}

	.item {
		width: 100%;
		line-height: 88rpx;
		background: #FF3C3F;
		color: #fff;
		font-size: 28rpx;
		border-radius: 20rpx;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.item-box-today {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: left;
		margin-bottom: 60rpx;

		.item-today {
			width: 140rpx;
			line-height: 88rpx;
			background: #FF3C3F;
			color: #fff;
			font-size: 28rpx;
			border-radius: 20rpx;
			text-align: center;
      margin-right: 20px;
		}
	}

	.intobtn {
		width: 100%;
		line-height: 88rpx;
		background: #FF3C3F;
		color: #fff;
		font-size: 28rpx;
		border-radius: 20rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background: #ccc;
		margin-bottom: 60rpx;
	}

	.table-wrap {
		margin-top: 40rpx;
	}

	.popupotable {
		// scale(120%)
		transform: rotate(90deg);
		max-height: 600rpx !important;
		background: #fff;
		// overflow-y: auto;
	}

	.popupotable-ohter {
		background: #fff;
	}

	/deep/.item-th {
		padding: 0 8px !important;
	}

	/deep/.item-td.even {
		padding: 0 8px;
	}

	/deep/.item-td.odd {
		padding: 0 8px;
	}

	/deep/.zb-table {
		border-left: 1rpx solid rgb(232, 232, 232);
	}

	.popupotable-ohter /deep/.zb-table-tbody {
		// max-height: 60vh;
		max-height: 10vh;
		overflow-y: auto !important;
	}
.order-box{
	.order-item{
		border: 1px solid #FF3C3F;
		border-radius: 8px;
		padding: 6px 6px;
		line-height: 30px;
		font-size: 12px;
		.dd-no{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.dd-l{
			width: 40%;
		}
		.dd-r{
			width: 60%;
			text-align: right;
		}
	}
}
.order-item-conter {
	border-top: 1px solid #dfdfdf;
	display: flex;
	flex-direction: row;
	.order-image {
		width: 180rpx;
		height: 180rpx;
	}
	.conter-box {
		margin-left: 20rpx;
		flex: 1;
		width: 100%;
		.conter-num {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}
		.conter-num.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			view{
				flex: 1;
				text{
					display: inline-block;
					width: 46px;
					height: 30px;
					font-weight: 600;
					text-align: center;
					line-height: 30px;
					color: #FF3C3F;
					border: 1px solid #FF3C3F;
					border-radius: 6px;
				}
			}
			view.txt-r{
				display: flex;
				justify-content: flex-end;
			}
		}
		.conter-sku {
			flex-direction: row;
			margin-bottom: 0;
			text {
				margin-right: 20rpx;
			}
		}
	}
}
</style>